<template>
  <div>
    <el-row>
      <p class="el-descriptions__title">事件提醒(2)</p>
      <el-divider />
      <!-- <el-icon><Message /></el-icon> -->
      <el-row class="row">
        <el-button type="primary" icon="Message" >已读</el-button>
        <el-col :span="24" class="col" v-for="(item, index) in mesItems" :key="index" >
          <div class="mesContent">
            <el-checkbox />
            <div>
              <p class="title"> <el-icon class="icon" color="#7dbf4d"><ChatDotRound /></el-icon>{{ item.title }}</p>
              <p class="textP">{{ item.text }}</p>
              <p class="timeP">{{ item.time }}</p>
            </div>
          </div>
          <div class="read">
            <span class="dot"></span> 
            未读
          </div>
        </el-col>
      </el-row>
    </el-row>
    <el-row>
      <p class="el-descriptions__title">营销商机(2)</p>
      <el-divider />
      <el-row class="row">
        <el-button type="primary" icon="User" >维护联系</el-button>
        <el-col :span="24" class="busCol" v-for="(item, index) in busItems" :key="index" >
          <div class="mesContent">
            <el-checkbox />
            <span class="title">对公存款退出清单</span>
            <el-tag class="tag" type="danger">未成功</el-tag>
            <el-tag class="tag" type="success">成功</el-tag>
            <el-tag class="tag" >待跟进</el-tag>
          </div>
          <el-descriptions  :column="4">
            <el-descriptions-item label="统计时间">{{ item.time }}</el-descriptions-item>
            <el-descriptions-item label="核心客户号">{{ item.custNo }}</el-descriptions-item>
            <el-descriptions-item label="机构名称">{{ item.orgName }}</el-descriptions-item>
            <el-descriptions-item label="客户经理号">{{ item.mgrNo }}</el-descriptions-item>
            <el-descriptions-item label="客户经理名称">{{ item.mgrName }}</el-descriptions-item>
            <el-descriptions-item label="是否高粘度客户">{{ item.isHight }}</el-descriptions-item>
            <el-descriptions-item label="是否为科技文创标签客户">{{ item.isGKJ }}</el-descriptions-item>
            <el-descriptions-item label="是否为绿色金融标签客户">{{ item.isGreen }}</el-descriptions-item>
            <el-descriptions-item label="贷款余额">{{ item.loanNum }}</el-descriptions-item>
            <el-descriptions-item label="用信余额">{{ item.xyNum }}</el-descriptions-item>
            <el-descriptions-item label="上年末用信余额">{{ item.xyYearNum }}</el-descriptions-item>
            <el-descriptions-item label="特殊产品余额">{{ item.TSNum }}</el-descriptions-item>
            <el-descriptions-item label="上年末特殊产品余额">{{ item.TSYearNum }}</el-descriptions-item>
            <el-descriptions-item label="网格内外标志">{{ item.isWang }}</el-descriptions-item>
            <el-descriptions-item label="退出原因">{{ item.reason }}</el-descriptions-item>
          </el-descriptions>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script setup lang="ts">
  const mesItems = ref([
    {text:'客户杭州联合银行公司定期账户XXXXXXXXX于4月24日转出100万元,请注意维护客户关系',time:'4月22日 12:18',title:'大额交易-常规'},
    {text:'客户杭州联合银行公司定期账户XXXXXXXXX于4月24日转出100万元,请注意维护客户关系',time:'4月22日 12:18',title:'大额交易-常规'},
    {text:'客户杭州联合银行公司定期账户XXXXXXXXX于4月24日转出100万元,请注意维护客户关系',time:'4月22日 12:18',title:'大额交易-常规'},
  ])


const busItems = ref([
  { time: '2022-03-23', custNo: '928881231234', orgName: '江村支行', mgrNo: '014220', mgrName: '王冰冰', isHight: '是', isGKJ:'是',isGreen:'是',loanNum:'20000000000',xyNum:'3000000000',xyYearNum:'3000000000',TSNum:'3000000000',TSYearNum:'30000000000',isWang:'--',reason:'----'},
  { time: '2022-03-23', custNo: '928881231234', orgName: '江村支行', mgrNo: '014220', mgrName: '王冰冰', isHight: '是', isGKJ:'是',isGreen:'是',loanNum:'20000000000',xyNum:'3000000000',xyYearNum:'3000000000',TSNum:'3000000000',TSYearNum:'30000000000',isWang:'--',reason:'----'},
  { time: '2022-03-23', custNo: '928881231234', orgName: '江村支行', mgrNo: '014220', mgrName: '王冰冰', isHight: '是', isGKJ:'是',isGreen:'是',loanNum:'20000000000',xyNum:'3000000000',xyYearNum:'3000000000',TSNum:'3000000000',TSYearNum:'30000000000',isWang:'--',reason:'----'},
  ])
  
</script>

<style scoped lang="scss">
  .row{
    // margin: 10px 0;
    padding: 5px 10px;
    width: 100%;
    margin-bottom: 10px;
    .col{
      border: 1px solid #DDE2EA;
      border-radius: 2px;
      height: 100px;
      margin-top: 10px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding: 10px;
      .mesContent{
        display: flex;
        flex-direction: row;
        div{
          display: flex;
          flex-direction: column;
          margin-left: 10px;
          height: 100%;
          justify-content: space-around;
          .title{
            font-size: 18px;
            font-weight: bold;
            .icon{
              margin: 0 5px;
            }
          }
          .textP{
            font-size: 14px;
            color: #495169;
          }
          .timeP{
            font-size: 10px;
            color: #7B7F8C;
          }
        }
      }
      .read{
          font-size: 14px;
          color: #495169;
          .dot{
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: red;
          }
        }
    }
    .busCol{
      display: flex;
      flex-direction: column;
      border-radius: 5px;
      height: 220px;
      margin: 5px 0;
      padding: 10px;
      background-color: rgb(249, 250, 251);
      .mesContent{
        display: flex;
        flex-direction: row;
        align-items: center;
        margin: 5px 0;
        .tag{
          margin: 0 2px;
        }
        .title{
          font-size: 16px;
          font-weight: bold;
          margin: 0 5px;
        }
      }
    }
  }
  ::v-deep .el-descriptions__body{
    background-color: rgb(249, 250, 251) !important;
  }
</style>